<template>
	<ul class="wmenu">
		<a href="#/" >
			<li :class="type=='/'?'nav_type':''">首页</li>
		</a>
		<a href="#/no2">
			<li :class="type=='/no2'?'nav_type':''">热门景点</li>
		</a>
	</ul>
</template>

<script>
	export default {
		data() {
			return {
				type: '/'
			}
		},
		mounted(){
			this.type = this.$route.path
		},
		watch:{
			'$route.path'(a,b){
				this.type = this.$route.path
			}
		}
	}
</script>

<style>
	.wmenu {
		list-style: none;
		overflow: hidden;
		/*text-align: center;*/
	}
	
	.wmenu li {
		display: inline-block;
		padding: 0 10px;
		position: relative;
	}
	
	.wmenu li:before {
		transition: all .8s;
		content: '';
		width: 100% !important;
		position: absolute;
		bottom: 0px;
		transform: scale(0);
		left: 0px;
		height: 2px;
		background: #FFFFFF;
	}
	
	.wmenu li:hover:before {
		transform: scale(1);
	}
	
	.nav_type:before {
		transform: scale(1) !important;
	}
	
	.wmenu a {
		color: #FFFFFF;
	}
</style>